<%--
  Created by IntelliJ IDEA.
  User: TT
  Date: 2020/5/18
  Time: 15:20
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<div class="container-fluid  mt-2">
    <!-- 供应商基础信息 -->
    <div class="row mb-3">
        <div class="col font-weight-bold">
            <label><span class="mr-3" style="border: 2px solid rgb(35,151,243)"></span>供应商基础信息</label>
        </div>
    </div>
    <div class="ml-5  mb-3">
        <div class="row mb-3">
            <label class="text-black-100 mr-3">供应商名称 :</label><span class="text-black-50">${map.supplierName}</span>
        </div>
        <div class="row mb-3">
            <div class="col-3 bg-light mr-2">
                <label class="text-black-100 mr-3">供应商编号 :</label><span class="text-black-50">${map.id}</span>
            </div>
            <div class="col-3 bg-light mr-2">
                <label class="text-black-100 mr-3">供应商类型 :</label><span class="text-black-50">${map.supplierType}</span>
            </div>
            <div class="col-3 bg-light mr-2">
                <label class="text-black-100 mr-3">详细地址 :</label><span class="text-black-50">${map.address}</span>
            </div>
        </div>
        <div class="row">
            <div class="col-3 bg-light mr-2">
                <label class="text-black-100 mr-3">联系人 :</label><span class="text-black-50">${map.contactName}</span>
            </div>
            <div class="col-2 bg-light mr-2">
                <label class="text-black-100 mr-3">联系电话 :</label><span class="text-black-50">${map.phone}</span>
            </div>
        </div>
    </div>

    <hr style="border-top: 1px solid #999;"/>
    <!-- 供应商物品 -->
    <div class="row mb-3">
        <div class="col font-weight-bold">
            <label><span class="mr-3" style="border: 2px solid rgb(35,151,243)"></span>供应商物品表格</label>
        </div>
    </div>

    <!-- 供应商物品表格 -->
    <div class="ml-3 mb-5">

        <table class="table table-striped">
            <thead>
                <tr>
                    <th scope="col-3" class="text-center" style="width: 100px">物品编号</th>
                    <th scope="col-3" class="text-center">物品名称</th>
                    <th scope="col-3" class="text-center">计量单位</th>
                    <th scope="col-3" class="text-center">详情</th>
                </tr>
            </thead>
            <tbody>
            <c:forEach var="list" items="${map.goodsList}">
                <tr>
                    <th scope="row" class="text-center"  style="width: 100px">${list.id}</th>
                    <td class="text-center">${list.goodsName}</td>
                    <td class="text-center">${list.unit}</td>
                    <td class="text-center">

                        <a href="javascript:;" tabindex="0" dd="1" title="商品属性详情" data-trigger="focus" data-content="<c:forEach var="map" items="${list.attrMap}"> ${map.key}:${map.value} <br> </c:forEach> ">...</a>
                    </td>
                </tr>
            </c:forEach>


            </tbody>
        </table>
    </div>
</div>

<script src="${pageContext.request.contextPath}/static/lib/bootstrap/js/bootstrap.bundle.js" type="text/javascript" charset="utf-8"></script>
<script>
    $(function () {
        $('[dd="1"]').popover({
            html: true
        })
    })
</script>

